<template>
  <div>
    <div class="logbox">
      <el-form :model="userForm" label-width="100px" :class="{demo_ruleForm : flag}">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="userForm.username"></el-input>
        </el-form-item>
        <el-form-item label="昵称" prop="nickname">
          <el-input v-model="userForm.nickname"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="userForm.email"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="danger" @click="sure">确定修改</el-button>
          <el-button class="confirm" @click="goout">X</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  name: 'DialogDialog',

  data () {
    return {
      userForm: {}
    }
  },
  mounted () {
    this.userForm = { ...this.list }
  },

  methods: {
    async sure () {
      const result = await this.$confirm('此操作将修改该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(e => e)
      if (result === 'confirm') {
        const result1 = await this.$confirm('真的要修改吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).catch(e => e)
        if (result1 === 'confirm') {
          const result2 = await this.$confirm('不再考虑考虑吗?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).catch(e => e)
          if (result2 === 'confirm') {
            const result3 = await this.$confirm('考虑好了吗?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).catch(e => e)
            if (result3 === 'confirm') return this.$message.error('就不给你改!')
            this.$emit('update:list', this.userForm)
            this.$emit('update:flag', false)
            this.$message.success('我偏偏就要改!')
          }
        }
      }
    },
    goout () {
      this.$emit('update:flag', false)
    }
  },
  props: {
    list: {
      type: Object,
      required: true
    },
    flag: {
      type: Boolean,
      required: true
    }
  }
}
</script>

<style lang="less" scoped>
.logbox {
  width: 700px;
  height: 500px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid transparent;
  position: fixed;
  top: 100px;
  left: 515px;
  border-radius: 5px;
  background-color: #fff;
  .el-form {
    width: 500px;
    height: 300px;
    .confirm {
      position: absolute;
      top: -288px;
      left: 439px;
      border: 0 transparent;
    }
  }
}
</style>
